<template>
	<div class="common_question_detail">
		<el-page-header @back="handleBackPage" content="问题详情"></el-page-header>
		<div class="common_question_body">
			<div class="head">{{ questionData.ask }}</div>
			<div class="cont" v-html="questionData.answer"></div>
		</div>
	</div>
</template>

<script>
import { queryTbQa } from '@/api/system/tbQa';
export default {
	data() {
		return {
			questionData: {}
		};
	},
	computed: {
		faqId() {
			return this.$route.params.id;
		}
	},
	watch: {
		faqId: {
			handler(val) {
				this.getQuestionDetail(val);
			},
			immediate: true
		}
	},
	methods: {
		//获取问题详情
		async getQuestionDetail(id) {
			let result = await queryTbQa(id).then((res) => res.data);
			if (result.code === '0') {
				this.questionData = this.$detailData(result.data);
			}
		},

		handleBackPage() {
			this.$router.back();
		}
	}
};
</script>

<style lang="scss" scoped>
.common_question_detail {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 4px;
	background-color: #fff;
	.el-page-header {
		padding: 12px;
		flex-shrink: 0;
		border-bottom: solid 1px #ebeef5;
	}
}

.common_question_body {
	flex: 1;
	padding: 16px;
	overflow: auto;
	.head {
		font-size: 16px;
		font-weight: bold;
		line-height: 24px;
		&::before {
			content: '问题：';
		}
	}
	&:deep(.cont) {
		font-size: 16px;
		line-height: 2;
		margin-top: 16px;
		color: #606266;
		&::before {
			float: left;
			font-weight: bold;
			content: '答案：';
		}
		img {
			display: block;
			max-width: 100%;
		}
	}
}
</style>
